<template>
	<view class="loginBox">
		<view class="back"></view>
		<view style="height: 250rpx;"></view>
		<view class="name" @click="back"><uni-icons class="backIcon" size="22" color="white"
				type="left"></uni-icons>欢迎注册禹冰之家</view>
		<view class="buttonBox">
			<image class="logo" mode="widthFix" src="../../static/yblogo.png"></image>
			<view class="formation">
				<view class="labelBox">
					<view class="input">
						<input v-model="form.userName" placeholder="账号"></input>
					</view>
				</view>
				<view class="labelBox">
					<view class="input">
						<input v-model="form.phone" placeholder="手机号"></input>
					</view>
				</view>
				<view class="labelBox">
					<view class="input">
						<input v-model="form.password" placeholder="密码"></input>
					</view>
				</view>
				<view class="verifyBox">
					<view class="input">
						<input v-model="form.code" placeholder="验证码"></input>
						<view v-if="!count_down" @click="getMsgCode()"
							style="text-align: center;line-height: 64rpx;font-size: 24rpx;color: #fff; width: 150rpx;height: 64rpx;background: #3381FF;border-radius:10rpx;">
							获取验证码</view>
						<view v-else
							style="text-align: center;line-height: 64rpx;font-size: 24rpx;color: #fff; width: 150rpx;height: 64rpx;background: #ccc;border-radius:10rpx;">
							重新获取{{ count_down }}s</view>
					</view>
				</view>
			</view>
			<view class="login" @click="register">注册</view>
			
		 <!-- <view class="agreement">
		  	<image v-if="isagree==0" @click="choose(1)" style="width:36rpx;height: 36rpx;margin-right: 14rpx;margin-top: 2rpx;" src="../../static/agreed.png" mode="aspectFill"></image>
		  	<image v-if="isagree==1" @click="choose(0)" style="width:36rpx;height: 36rpx;margin-right: 14rpx;margin-top: 2rpx;" src="../../static/isagreed.png" mode="aspectFill"></image>
		  	<view class="text">同意并登录<text style="color: #3381FF;" @click="goAgree(1)" >【服务协议】</text>和<text style="color: #3381FF;" @click="goAgree(2)">【隐私保护指引】</text></view>
		  </view> -->
			<view class="tips" @click="toPhone">已有账号？<span class="register">点击登录</span></view>
		</view>
		
	</view>
</template>

<script>
	import {register,getcode} from '@/utils/API.js'
	export default {
		data() {
			return {
				isagree:0,
				count_down:'',
				form: {
					"userName": "",
					"password": "",
					"phone": "",
					"code": ""
				}

			}
		},
		methods: {
			//同意隐私条款
			choose(e){
				this.isagree = e
			},
			//查看协议
			goAgree(id){
				uni.navigateTo({
					url:'/pages-user/agreement/agreement?id='+id
				})
			},
			// 点击获取验证码时开始倒计时
			getMsgCode() {
				this.form.code = ''
				var phone = this.form.phone //校验电话号码
				let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
			
				if (!reg.test(phone) || phone == "") {
					this.form.phone= ''
					uni.showToast({
						title: '请输入正确的手机号码！',
						icon: 'none',
						duration: 700
					})
					return
				}
				// 请求接口获取验证码，然后倒计时
				this.count_down = 60 // 倒数60秒
				this.countDown()
				this.hqyam() //开始发送验证码
			},
			// 倒计时
			countDown() {
				this.timer = setInterval(() => {
					this.count_down = this.count_down - 1
					if (this.count_down < 10) this.count_down = '0' + this.count_down
					if (this.count_down <= 0) {
						clearInterval(this.timer)
						this.count_down = ''
					}
				}, 1000)
			},
			// 获取验证码
			async hqyam() {
				console.log('获取验证码');
				var data = {
					userName: this.form.userName ,
					phone: this.form.phone 

				}
				const res = await getcode(data)
				if(res.code==200){
					console.log('验证码',res);
				}
			
			},
			toPhone() {
				uni.navigateBack()
			},
			
			back() {
				uni.navigateBack()
			},
			async register() {
				uni.showLoading({
					title: '注册中~'
				})
				var data = this.form
				const res = await register(data)
				if(res.code==200){
					console.log(res);
					uni.hideLoading()
					uni.showToast({
						title:'注册成功',
						icon:'success',
						duration:1000
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				}else{
					uni.hideLoading()
					uni.showToast({
						title:err.msg,
						icon:'none',
						duration:1000
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: "阿里妈妈数黑体";
		font-weight: 700;
		src: url("//at.alicdn.com/wf/webfont/Z6NGK12PNmYL/PQCnFJB5enWt.woff2") format("woff2"),
			url("//at.alicdn.com/wf/webfont/Z6NGK12PNmYL/CaLgXE8NhYHt.woff") format("woff");
		font-display: swap;
	}


	.loginBox {
		height: 100vh;
		background-color: white;
		position: relative;
		z-index: +1;
		background-color: $MainBackColor;

		.formation {
			width: 600rpx;

			.labelBox {
				margin: 10px 0px;

			}

			.verifyBox {
				.input {
					display: flex;
					align-items: center;

					.verify {
						background-color: $blue;
						color: white;
						margin-left: 10px;
						height: 70rpx;
						padding: 0px 10px;
						border-radius: 5px;
						text-align: center;
						display: flex;
						align-items: center;
					}
				}
			}
		}

		

		.name {
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: '阿里妈妈数黑体';
			color: white;
			font-size: 60rpx;

			.backIcon {
				font-weight: bold;
				margin-right: 10px;
			}
		}

		.buttonBox {
			background-color: white;
			margin: 0 auto;
			margin-top: 80rpx;
			border-radius: 10px;
			width: 690rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 60rpx;box-sizing: border-box;

			.logo {
				width: 180rpx;
				margin: 20px 0px;
			}
			.agreement {
				display: flex;
				margin-top: 30rpx;
				align-items: center;
				justify-content: center;
				margin-bottom: 20px;
				width: 600rpx;
			
			
				.checkBox {
					border-radius: 50%;
					border: 2px solid $blue;
					width: 8px;
					height: 8px;
					margin-right: 5px;
				}
			
				.text {
					font-size: 14px;
			
				}
			}

			.login {
				background-color: #3381FF;
				color: white;
				width: 600rpx;
				text-align: center;
				padding: 10px 0px;
				border-radius: 5px;
				margin: 0 auto;
				margin-top: 30px ;
			}

			.phoneLogin {
				box-sizing: border-box;
				border: 1px solid $grey;
				width: 100%;
				text-align: center;
				padding: 10px 0px;
				border-radius: 5px;
				margin: 10px 0px;
			}

			.tips {
				color: $grey;
				font-size: 14px;
				margin-top: 30rpx;

				.register {
					color: $blue;
				}
			}
		}

		.back {
			z-index: -1;
			position: absolute;
			top: 0px;
			height: 1000rpx;
			width:750rpx;
			background: linear-gradient(to bottom, #4E8CFF, #80c4ff, rgba(0, 0, 0, 0));
		}
	}
</style>